<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>登录</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css"
	href='<c:url value="/uikit-2.25.0/css/uikit.min.css"/>'>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src='<c:url value="/uikit-2.25.0/js/uikit.min.js"/>'></script>
</head>


<script type="text/javascript">
	function change() {
		var element = document.getElementById("vCode");
		element.src = "<c:url value='/imgCode'/>?xxx=" + new Date().getTime();

	}
	function showError(element) {
		var text = element.text(); //获取元素元素的内容
		if (!text) {//如果没有内容,就让他隐藏
			element.css("display", "none");
		} else { //如果有内容,就让他显示
			element.css({
				"display" : "",
				"color" : "red"
			})
		}
	}

	$(function() {
		//1.获取所有错误信息,循环遍历。调用showError来确定是否显示错误信息！
		$(".errorClass").each(function() {
			showError($(this));
		})

		$(".text").focus(function() {
			var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
			$("#" + labelId).text("");
			showError($("#" + labelId))
		})
		$(".text").blur(
				function() {
					var id = $(this).attr("id"); //获取当前输入框的id
					var funName = "validate" + id.substring(0, 1).toUpperCase()
							+ id.substring(1) + "()";
					console.log(funName);
					eval(funName);//执行函数调用
				})
	})
	/*
	 * 校验登陆用户名
	 */
	function validateUsername() {
		var id = "username";
		//1.获取输入框的值
		var value = $("#" + id).val();
		if (!value) {
			$("#" + id + "Error").html("用户名不能为空");
			$("#button").attr('disabled',"true");
			showError($("#" + id + "Error"));
			return false;
		}else{
			$('#button').removeAttr("disabled");
		}
	}
	/*
	 * 校验登陆用户密码
	 */
	function validatePassword() {
		var id = "password";
		//1.获取输入框的值
		var value = $("#" + id).val();
		if (!value) {
			$("#" + id + "Error").html("密码不能为空")
			$("#button").attr('disabled',"true");
			showError($("#" + id + "Error"))
			return false;
		}else{
			$('#button').removeAttr("disabled");
		}
	}
	/*
	 * 校验验证码
	 */
	function validateCaptcha() {
		var id = "captcha";
		//1.获取输入框的值
		var value = $("#" + id).val();
		$.get('<c:url value="/userServlet"/>', {
			"method" : "ajaxCodeImg",
			captcha : value
		}, function(data) {
			if (data == 0) {
				$("#" + id + "Error").text("验证码错误");
				$("#button").attr('disabled',"true");
				showError($("#" + id + "Error"));
				return false;
			} else{
				$('#button').removeAttr("disabled");
			}
		})
	}
	
	
</script>
<body>
	<div class="uk-grid">
		<div class="uk-width-3-10"></div>
		<p style="color: red; font-weight: 900">${msg }</p>
		<div class="uk-width-2-5">

			<form id="loginForm" class="uk-form"
				action="<c:url value="/userServlet"/>" method="POST" target="parent">
				<fieldset data-uk-margin>
					<legend class="uk-text-center">登陆</legend>

					<input type="hidden" name="method" value="login" />
					<div class="uk-form-row  uk-text-center">
						<span class="uk-form-help-inline">用户名:</span> <input type="text"
							placeholder="请输入用户名"
							class="uk-form-large uk-form-width-medium text" name="username"
							id="username"> <label class="uk-display-block errorClass"
							id="usernameError"></label>
					</div>
					<div class="uk-form-row  uk-text-center ">
						<span class="uk-form-help-inline">密&ensp;&ensp;码:</span> <input
							type="text" placeholder="请输入用户密码"
							class="uk-form-large uk-form-width-medium text" name="password"
							id="password"> <label class="uk-display-block errorClass"
							id="passwordError"></label>
					</div>
					<div class="uk-form-row  uk-text-center ">
						<span class="uk-form-help-inline">验证码:</span> <input type="text"
							placeholder="" class="uk-form-large uk-width-1-6 text"
							name="captcha" id="captcha"> &ensp;<span
							class="uk-width-2-6"><img id="vCode" id="vCode"
							src='<c:url value="/imgCode"/>' onclick="change()"
							style="width: 102px; height: 40px;"></span> <label
							id="captchaError" class="uk-display-block errorClass"></label>
					</div>
					<div class="uk-form-row  uk-text-center	">
						<input type="submit"  id="button" class="uk-button uk-button-large uk-button-primary" value="登陆">
					</div>

				</fieldset>
			</form>
		</div>
		<div class="uk-width-3-10"></div>
	</div>
</body>

</html>
